<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FineUIEx.js</title>
    <link rel="stylesheet" href="css/2023030101/index.css" />
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

    <script src="js/2023030101/index.js"></script>
</head>
<body>
    <div class="main">
        <nav class="navbar">
            <li><a href="#head">首页</a></li>
            <li><a href="#page1">第一页</a></li>
            <li><a href="#page2">第二页</a></li>
            <li><a href="#page3">第三页</a></li>
            <li><a href="#page4">第四页</a></li>
            <li><a href="#page5">第四页</a></li>
            <li><a href="#page6">第四页</a></li>
          </nav>
    
        <section id="head" class="page head">
            <div class="content ">
                <h1>FineUIEx 纯前端扩展插件</h1><p/>
                FineUI 前端扩展，纯js扩展，开箱即用
                <br/>兼容 <span class="tag">FineUIPro</span> 
                <span class="tag">FineUIMVC</span>
                <span class="tag">FineUICore</span> 
                <br/>包括JS和CSS，不涉及后台的扩展，直接引用即可
            </div>
            <div class="imgs">
                <img src="images/2023030101/2023年3月1日代码示例.png"/>
            </div>
        </section>
        <section id="page1" class="page page1">
            <div class="content ">
                <h1>页签切换动画</h1> 
                <span class="tag2">企业版功能</span><p/>
                <h1>树展开动画</h1>
                <span class="tag2">企业版功能</span>
            </div>
            <div class="imgs">
                <img src="images/2023030101/动画2.gif"/>
            </div>
        </section>
        <section id="page2" class="page page2">
            <div class="content ">
                <h1>弹出窗体动画</h1> 
                <span class="tag2">企业版功能</span><p/>
                <h1>提示进度条</h1>
                <span class="tag3">扩展功能</span>
            </div>
            <div class="imgs">
                <img src="images/2023030101/动画3.gif"/>
            </div>
        </section>
        <section id="page3" class="page page3">
            <div class="content ">
                <h1>下拉多选框 & 全选</h1> 
                <span class="tag2">企业版功能</span><p/>
            </div>
            <div class="imgs">
                <img src="images/2023030101/下拉多选1.gif"/>
            </div>
        </section>
        <section id="page4" class="page page4">
            <div class="content ">
                <h1>按钮样式</h1>
                <span class="tag3">扩展功能</span>
                <div class="code">
                    //Pro
                    <br/>&lt;F:Button ... CssClass="f-btn-Default"&gt;
                    <br/>&lt;F:Button ... CssClass="f-btn-Primary"&gt;
                    <br/>&lt;F:Button ... CssClass="f-btn-Success"&gt;
                    <br/>&lt;F:Button ... CssClass="f-btn-Info"&gt;
                    <br/>&lt;F:Button ... CssClass="f-btn-Warning"&gt;
                </div>
                <div class="code">
                    //MVC/Core
                    <br/>F.Button().CssClass("f-btn-Default")
                </div>
            </div>
            <div class="imgs" style="height: 50svh;">
                <img src="images/2023030101/按钮2.png"/>
            </div>
        </section>
        <section id="page5" class="page page5">
            <div class="content ">
                <h1>表单验证位置</h1>
                <span class="tag3">扩展功能</span>
                <div class="code">
                    //Pro
                    <br/>F.ready(function () {
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;//true开启 false关闭
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F(formClientID).errorRow = false;
                    <br/>});
                </div>
                <div class="code">
                    //MVC/Core
                    <br/>F.ready(function () {
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;//true开启 false关闭
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F.ui.Form1.errorRow = false;
                    <br/>});
                </div>
            </div>
            <div class="imgs">
                <img src="images/2023030101/表单验证1.gif"/>
            </div>
        </section>
        <section id="page7" class="page page7">
            <div class="content ">
                <h1>Grid列表鼠标阔选</h1>
                <span class="tag3">扩展功能</span>
                <div class="code">
                    //Pro
                    <br/>F.ready(function () {
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;//true开启 false关闭
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F(gridClientID).quickSelect = true;
                    <br/>});
                </div>
                <div class="code">
                    //MVC/Core
                    <br/>F.ready(function () {
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;//true开启 false关闭
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F.ui.Grid1.quickSelect = true;
                    <br/>});
                </div>
            </div>
            <div class="imgs">
                <img src="images/2023030101/Grid多选.gif"/>
            </div>
        </section>
        <section id="page8" class="page page8">
            <div class="content ">
                <h1>TextBox标签模式</h1>
                <span class="tag3">扩展功能</span>
                <div class="code">
                    //Pro
                    <br/>F.ready(function () {
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F(textClientID).multiTag();//开启
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F(textClientID).addTag(`文件3`);//新增标签
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F(textClientID).removeTag(`文件3`);//移除标签
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F(textClientID).setValue(`1,2,3`);//逗号分隔标签
                    <br/>});
                </div>
                <div class="code">
                    //MVC/Core
                    <br/>F.ready(function () {
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;F.ui.TextBox1.multiTag();//开启
                    <br/>});
                </div>
            </div>
            <div class="imgs">
                <img src="images/2023030101/文本标签框.gif"/>
            </div>
        </section>
        <section id="page6" class="page page6">
            <h1>立即获取</h1>
            <div class="imgs">
                <img style="height: 90%;" src="images/2023030101/1.jpg"/>
            </div>
        </section>
    </div>
</body>
</html>